<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>零件库存</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="../../static/js/jquery-3.3.1.min.js"></script>
    <script src="../../static/js/utils.js"></script>
    <!-- 引入vue -->
    <script src="../../static/js/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style>
        .block {
            margin-top: 20px;
            display: flex;
            justify-content: flex-end;
        }
    </style>
</head>
<body>
<div id="app">
    <div style="margin-left: 20px">
        <el-form ref="searchForm" :model="CartParameter" label-width="80px">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="创建人">
                        <el-select v-model="CartParameter.partcreater" filterable clearable
                                   style="width: 200px;"
                                   placeholder="请选择">
                            <el-option
                                    v-for="item in emp"
                                    :key="item.id"
                                    :label="item.employeename"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="创建时间">
                        <el-date-picker
                                v-model="CartParameter.partCreateDate"
                                type="date"
                                style="width: 200px;"
                                placeholder="选择日期"
                                format="yyyy 年 MM 月 dd 日"
                                value-format="yyyy-MM-dd">
                        </el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-form-item label="单位">
                        <el-input v-model="CartParameter.partunit" style="width: 200px;"
                                  placeholder="单位"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="6">
                    <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>

                    <el-button type="primary" @click="addAndDialog" icon="el-icon-plus">添加</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
    <el-table
            :data="cars"
            height="527px"
            border
            style="width: 100%">
        <el-table-column
                type="index"
                width="50" align="center">
        </el-table-column>
        <el-table-column
                prop="partname"
                label="零件名"
                width="180" align="center">
        </el-table-column>
        <el-table-column
                prop="partunit"
                label="零件单位" align="center">
        </el-table-column>
        <el-table-column
                prop="partstore"
                label="数量" align="center">
        </el-table-column>
        <el-table-column
                prop="producerName"
                label="供应商"
                width="180" align="center">
        </el-table-column>
        <el-table-column
                prop="costprice"
                label="成本" align="center">
        </el-table-column>
        <el-table-column
                prop="zje"
                label="总金额" align="center">
        </el-table-column>
        <el-table-column
                prop="partminstore"
                label="最小数量" align="center">
        </el-table-column>
    </el-table>
    <div class="block">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="currPage"
                :page-sizes="[10, 15, 20, 100]"
                :page-size="pageSize"
                layout="sizes, total, prev, pager, next"
                :total="total">
        </el-pagination>
    </div>
    <el-dialog title="添加入库" :visible.sync="dialogFormVisible">
        <el-form :model="carsData" ref="carsDataref" label-width="80px" label-position="top">
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="零件编号">
                        <el-input v-model="carsData.partcode" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="零件名">
                        <el-input v-model="carsData.partname" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="货位号">
                        <el-input v-model="carsData.partplacecode" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="供应商">
                        <el-select v-model="carsData.producertableId" filterable clearable
                                   placeholder="请选择">
                            <el-option
                                    v-for="item in producertables"
                                    :key="item.id"
                                    :label="item.producerName"
                                    :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="单位">
                        <el-input v-model="carsData.partunit" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="体积">
                        <el-input v-model="carsData.partcubage" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="重量">
                        <el-input v-model="carsData.partweight" autocomplete="off"><template slot="append">kg</template></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="库存数量">
                        <el-input v-model="carsData.partstore" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="最小库存数量">
                        <el-input v-model="carsData.partminstore" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row :gutter="20">
                <el-col :span="8">
                    <el-form-item label="销售价">
                        <el-input v-model="carsData.saleprice" autocomplete="off"><template slot="append">元</template>></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="成本价">
                        <el-input v-model="carsData.costprice" autocomplete="off"><template slot="append">元</template>></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="备注">
                        <el-input v-model="carsData.details" autocomplete="off"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel()">取 消</el-button>
            <el-button type="primary" @click="commit">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            currPage: 1,//当前页
            pageSize: 10,//每页显示条数
            total: 0,//总条数
            cars: [],
            emp: [],
            producertables:[],
            dialogFormVisible: false,
            carsData: {
                partcode: '',
                partname: '',
                partcreater: '',
                partcreatedate: '',
                partplacecode: '',
                producertableId: '',
                partunit: '',
                partcubage: '',
                partweight: '',
                partstore: '',
                partminstore: '',
                saleprice: '',
                costprice: '',
                details: ''
            },
            CartParameter: {
                partCreater: '',
                partCreateDate: '',
                partUnit: ''
            }
        },
        methods: {
            commit() {
                let _this = this;
                //addCar
                addOrUpdateAjax("post","/carpartstable/addCar",_this.carsData, data => {
                    if (data.code == 200) {
                        _this.cancel();
                        _this.$message({
                            message: data.msg,
                            type: 'success'
                        });
                        _this.myInitCar();
                    }else {
                        _this.$message.error(data.msg);
                    }
                })
            },

            cancel() {
                this.dialogFormVisible = false;
                this.carsData = {
                    partcode: '',
                        partname: '',
                        partcreater: '',
                        partcreatedate: '',
                        partplacecode: '',
                        producertableId: '',
                        partunit: '',
                        partcubage: '',
                        partweight: '',
                        partstore: '',
                        partminstore: '',
                        saleprice: '',
                        costprice: '',
                        details: ''
                }
            },
            addAndDialog() {
                this.dialogFormVisible = true;
                this.carsData.partcode = this.generateRandomValue();
                this.carsData.partcreater = localStorage.getItem("username");
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.myInitCar();
            },
            handleCurrentChange(val) {
                this.currPage = val;
                this.myInitCar();
            },
            search(){
                this.myInitCar();
            },
            myInitCar() {
                let _this = this;
                if (localStorage.getItem("token") != null) {
                    $.ajax({
                        async: true,
                        type: 'GET',
                        url: 'http://localhost:8080/carSales/carpartstable/list?currPage=' + _this.currPage + '&pageSize=' + _this.pageSize,
                        beforeSend: function (request) {
                            request.setRequestHeader("Authentication", localStorage.getItem("token"));
                        },
                        data: _this.CartParameter,
                        dataType: 'json',
                        success: function (data) {
                            _this.currPage = data.pageNum;
                            _this.pageSize = data.pageSize;
                            _this.total = data.total;
                            _this.cars = data.data
                        }
                    })
                } else {
                    alert("未登录！！！")
                    top.location.href = "../login/login.html";
                }
            },
            myEmpInitSelect() {
                let _this = this;
                selectAjax("get", "/employeetable/list", null, (data) => {
                    _this.emp = data.data;
                })
            },
            myProducertableInitSelect() {
                let _this = this;
                selectAjax("get", "/producertable/list", null, (data) => {
                    _this.producertables = data.data;
                })
            },
            generateRandomValue() {
                let data = '';
                let randomNumber;
                let randomChar;
                var randomNum = Math.floor(Math.random() * (10 - 5 + 1)) + 5;
                // console.log("for ====i===>"+randomNum)
                const randomString = 'abcdefghijklmnopqrstuvwxyz'; // 定义一个字符串作为字符来源
                for (let i = 0; i < randomNum; i++) {
                    if (i%2 == 0){
                        randomNumber = Math.floor(Math.random() * 10); // 生成一个0到9之间的随机整数
                        randomChar = randomString[Math.floor(Math.random() * randomString.length)];
                        data += randomNumber + randomChar
                    }else {
                        randomChar = randomString[Math.floor(Math.random() * randomString.length)];
                        data += randomChar
                    }
                }
                // console.log(data)
                // this.employeetable.employeenumber = data
                // this.ifEmployeetableNumber(data)
                return data; // 将数字和字符转换为字符串并连接
            },
        },
        mounted() {
            this.myInitCar();
            this.myEmpInitSelect();
            this.myProducertableInitSelect();
        }
    })
</script>
</body>
</html>